import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable, {ActionType, TableDropdown} from '@ant-design/pro-table';
import { Switch, message} from 'antd';
import {useRef, useState} from 'react';
import {getPayInterest} from "@/services/ant-design-pro/card";
import '../../content/article.css'


const PayType = () => {
  const actionRef =  useRef<ActionType>();

  type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: string;
    createdAt: number;

  };

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '编号',
      dataIndex: 'id',
      search:false,
      align:"center"
    },
    {
      title: '权益名称',
      dataIndex: 'right_title',
      search:false,
      align:"center"
    },
    {
      title: '展示名称',
      dataIndex: 'show_title',
      search:false,
      align:"center"
    },
    {
      title: '权益图标',
      dataIndex: 'image',
      initialValue: 'all',
      search:false,
      align:"center"
    },
    {
      title: '权益简介',
      dataIndex: 'explain',
      initialValue: 'all',
      search:false,
      width:180,
      align:"center"
    },
    {
      title: '权益状态',
      dataIndex:'status',
      ellipsis: true,
      copyable: true,
      search:false,
      align:"center",
      render: (_,record) => [
        <Switch
          checkedChildren="激活"
          unCheckedChildren="冻结"
          defaultChecked={record.status}
          onChange={ async(state)=>{
            getPayInterest({
              id:record.id,
              status:state ? 1 : 0
            }).then(()=>{
              message.success('操作成功！')
              actionRef.current.reload();
            })
          }}
        />,
      ],
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      align:"center",
      render: () => [
        <a key="link" onClick={()=>{}}>编辑</a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem>
        columns={columns}
        actionRef={actionRef}
        request={async (params)=>{
          // console.log(params)
          const {data,meta} = await getPayInterest({...params})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        rowKey="id"
        search={{
          optionRender: false,
          collapsed: false,
        }}
        dateFormatter="string"
        toolBarRender={false}
      />
    </PageContainer>
  )
}

export default PayType;
